<template>
	<view class="enjoy-lottery">
		<!-- 一番赏 -->

		<!-- 导航栏 -->
		<view class="enjoy-lottery-nav" :class="{'black-bg':navBlackBg}"
			:style="{'height':navBottom+'px','opacity':navOpacity}">
			<view class="content" :style="{'width':navWidth+'px','top':navTop+'px;','height':navHeight+'px'}">
				<view class="left-back" @click="goBack">
					<uni-icons type="back" color="#fff"></uni-icons>
				</view>
				<view class="title">
					【预售】一番赏商品名称商品名称
				</view>
			</view>
		</view>

		<!-- 顶部图片 -->
		<view class="enjoy-lottery-top">
			<image src="../../static/images/boom/boom-detail/award-doll.png" mode="" class="image" />

			<!-- 左侧弹幕 -->
			<view class="left-box">
				<!-- 单个弹幕 -->
				<view class="barrage-item" :style="{'animation-delay':'.5s'}">
					<!-- 用户头像 -->
					<image src="../../static/images/boom/boom-detail/award-doll.png" mode="" class="barrage-item-pic" />
					<!-- 用户名称 -->
					<text class="barrage-item-name">q***是</text>
					<!-- 提示文本 -->
					<text>获得了</text>
					<!-- 赏别 -->
					<text class="barrage-item-type"
						:class="{'color-red':true,'color-orange':false,'color-purple':false}">A赏</text>
					<!-- 奖品名称 -->
					<image src="../../static/images/boom/boom-detail/award-doll.png" mode=""
						class="barrage-item-award" />
				</view>
				<!-- 单个弹幕 -->
				<view class="barrage-item" :style="{'animation-delay':'2s'}">
					<!-- 用户头像 -->
					<image src="../../static/images/boom/boom-detail/award-doll.png" mode="" class="barrage-item-pic" />
					<!-- 用户名称 -->
					<text class="barrage-item-name">但***t</text>
					<!-- 提示文本 -->
					<text>获得了</text>
					<!-- 赏别 -->
					<text class="barrage-item-type"
						:class="{'color-red':false,'color-orange':true,'color-purple':false}">B赏</text>
					<!-- 奖品名称 -->
					<image src="../../static/images/boom/boom-detail/award-doll.png" mode=""
						class="barrage-item-award" />
				</view>
				<!-- 单个弹幕 -->
				<view class="barrage-item" :style="{'animation-delay':'3.5s'}">
					<!-- 用户头像 -->
					<image src="../../static/images/boom/boom-detail/award-doll.png" mode="" class="barrage-item-pic" />
					<!-- 用户名称 -->
					<text class="barrage-item-name">d***s</text>
					<!-- 提示文本 -->
					<text>获得了</text>
					<!-- 赏别 -->
					<text class="barrage-item-type"
						:class="{'color-red':false,'color-orange':false,'color-purple':true}">C赏</text>
					<!-- 奖品名称 -->
					<image src="../../static/images/boom/boom-detail/award-doll.png" mode=""
						class="barrage-item-award" />
				</view>
			</view>

			<!-- 右侧盒子 -->
			<view class="right-box">
				<!-- 音效 -->
				<image :src="imageUrl('sound-effect-icon.png')" mode="" class="sound-effect-icon"
					:class="{'pause':isPaused}" @click="pausedAnimation" />

				<!-- 购买说明 -->
				<view class="right-more" @click="clickRules">
					<image :src="imageUrl('enjoy-lottery-more.png')" mode="" class="image-bg" />
					<view class="content">
						<text style="margin-right: 10rpx;">购买说明</text>
						<u-icon name="question-circle" color="#fff" size="22rpx"></u-icon>
					</view>
				</view>
				<!-- 我的背包 -->
				<view class="right-more">
					<image :src="imageUrl('enjoy-lottery-more.png')" mode="" class="image-bg" />
					<view class="content">
						<text style="margin-right: 10rpx;">我的背包</text>
						<u-icon name="gift" color="#fff" size="22rpx"></u-icon>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部列表 -->
		<view class="enjoy-lottery-bottom">
			<!-- 底部折线 -->
			<image :src="imageUrl('enjoy-lottery-line.png')" mode="" class="line-pic" data-text="00:00" />

			<!-- 吸顶 -->
			<view class="sticky-top" :style="{'top':navHeight+navTop+'px'}">

				<!-- 按钮组 -->
				<view class="btns-view">
					<!-- 赏品余量 -->
					<image :src="imageUrl('enjoy-lottery-rest.png')" mode="" class="image" data-text="赏品余量"
						@click="clickRest" />

					<!-- 奖品预览 -->
					<!-- 一开始选中 -->
					<image :src="imageUrl('enjoy-lottery-look-blue.png')" mode="" class="image" data-text="奖品预览"
						v-if="isShowRecord" />
					<image :src="imageUrl('enjoy-lottery-look-black.png')" mode="" class="image" data-text="奖品预览"
						@click="clickForward" v-else />

					<!-- 中赏记录 -->
					<!-- 一开始没有选中 -->
					<image :src="imageUrl('enjoy-lottery-record-black.png')" mode="" class="image" data-text="中赏记录"
						@click="clickRecord" v-if="isShowRecord" />
					<image :src="imageUrl('enjoy-lottery-record-blue.png')" mode="" class="image" data-text="中赏记录"
						v-else />

					<!-- 换箱 -->
					<image :src="imageUrl('enjoy-lottery-change.png')" mode="" class="image" data-text="换箱"
						@click="goTo('/pages/changebox/changebox')" />
				</view>

				<!-- 箱子 -->
				<view class="box-info">
					<!-- 上一箱 -->
					<view class="last-one">
						<uni-icons type="back" color="#fff" size="24rpx"></uni-icons>
						<text>上一箱</text>
					</view>
					<!-- 当前箱 -->
					<view class="now-one">
						第<text class="colorOrange">2</text>/5箱丨本箱还剩<text class="colorOrange">20</text>/100
					</view>
					<!-- 下一箱 -->
					<view class="last-one">
						<text>下一箱</text>
						<uni-icons type="forward" color="#fff" size="24rpx"></uni-icons>
					</view>
				</view>
			</view>

			<!-- 奖品预览显示 -->
			<view v-if="isShowRecord">
				<!-- first last all -->
				<view class="three-kind-record">
					<view class="one-record">
						<!-- 上方赏别及数量 -->
						<view class="one-record-top">
							<image :src="imageUrl('enjoy-record-box.png')" mode="" class="enjoy-record-box"
								data-text="First赏" />
							<text>1/1</text>
						</view>
						<!-- 赏品图片 -->
						<image src="../../static/images/boom/boom-detail/award-doll.png" mode=""
							class="one-record-pic" />
						<!-- 赏品名称 -->
						<view class="one-record-tip">
							<view class="one-record-name">
								商品名称商品名称商品名称商品名称商品名称商品名称
							</view>
							<view>
								前50%随机送
							</view>
						</view>
						<!-- 
						后50%随机送

						参与抽奖者随机送
					-->
					</view>
					<view class="one-record">
						<!-- 上方赏别及数量 -->
						<view class="one-record-top">
							<image :src="imageUrl('enjoy-record-box.png')" mode="" class="enjoy-record-box"
								data-text="Last赏" />
							<text>1/1</text>
						</view>
						<!-- 赏品图片 -->
						<image src="../../static/images/boom/boom-detail/award-doll.png" mode=""
							class="one-record-pic" />
						<!-- 赏品名称 -->
						<view class="one-record-tip">
							<view class="one-record-name">
								商品名称商品名称商品名称商品名称商品名称商品名称
							</view>
							<view>
								后50%随机送
							</view>
						</view>
					</view>
					<view class="one-record">
						<!-- 上方赏别及数量 -->
						<view class="one-record-top">
							<image :src="imageUrl('enjoy-record-box.png')" mode="" class="enjoy-record-box"
								data-text="全局赏" />
							<text>1/1</text>
						</view>
						<!-- 赏品图片 -->
						<image src="../../static/images/boom/boom-detail/award-doll.png" mode=""
							class="one-record-pic" />
						<!-- 赏品名称 -->
						<view class="one-record-tip">
							<view class="one-record-name">
								商品名称商品名称商品名称商品名称商品名称商品名称
							</view>
							<view>
								参与抽奖者随机送
							</view>
						</view>
					</view>
				</view>

				<!-- 赏品列表 -->
				<view class="record-list">
					<view class="record-item" v-for="item in 20">
						<!-- 上方赏别及数量 -->
						<view class="one-record-top">
							<text>A赏</text>
							<text>10/10</text>
						</view>
						<!-- 赏品图片 -->
						<image src="../../static/images/boom/boom-detail/award-doll.png" mode=""
							class="one-record-pic" />
						<!-- 赏品名称 -->
						<view class="one-record-tip">
							<view class="one-record-name">
								商品名称商品名称商品名称商品名称商品名称商品名称
							</view>
							<view>
								参考价：￥190
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 中赏记录显示 -->
			<view class="get-record-list" v-else>
				<!-- 单条中赏记录 -->
				<view class="get-record-item" :class="{'import-bg':true}">
					<image src="../../static/images/boom/boom-detail/award-doll.png" mode="" class="user-pic" />
					<view class="right">
						<view class="line-box">
							<text class="fontSize24">速溶沙漠用户 丨 100抽</text>
							<text class="class-type" :class="{'class-import':true}" data-text="First赏">First赏</text>
						</view>
						<view class="line-box">
							<text style="line-height: 44rpx;">2022-12-07 13:53:30</text>
							<text class="fontSize24">商品名称商品名称</text>
						</view>
					</view>
				</view>
				<!-- 单条中赏记录 -->
				<view class="get-record-item" :class="{'import-bg':true}">
					<image src="../../static/images/boom/boom-detail/award-doll.png" mode="" class="user-pic" />
					<view class="right">
						<view class="line-box">
							<text class="fontSize24">速溶沙漠用户 丨 100抽</text>
							<text class="class-type" :class="{'class-import':true}" data-text="Last赏">Last赏</text>
						</view>
						<view class="line-box">
							<text style="line-height: 44rpx;">2022-12-07 13:53:30</text>
							<text class="fontSize24">商品名称商品名称</text>
						</view>
					</view>
				</view>
				<!-- 单条中赏记录 -->
				<view class="get-record-item" :class="{'import-bg':true}">
					<image src="../../static/images/boom/boom-detail/award-doll.png" mode="" class="user-pic" />
					<view class="right">
						<view class="line-box">
							<text class="fontSize24">速溶沙漠用户 丨 100抽</text>
							<text class="class-type" :class="{'class-import':true}" data-text="全局赏">全局赏</text>
						</view>
						<view class="line-box">
							<text style="line-height: 44rpx;">2022-12-07 13:53:30</text>
							<text class="fontSize24">商品名称商品名称</text>
						</view>
					</view>
				</view>
				<!-- A赏 -->
				<view class="get-record-item">
					<image src="../../static/images/boom/boom-detail/award-doll.png" mode="" class="user-pic" />
					<view class="right">
						<view class="line-box">
							<text class="fontSize24">速溶沙漠用户 丨 100抽</text>
							<text class="class-type" :class="{'color-red':true}" data-text="A赏">A赏</text>
						</view>
						<view class="line-box">
							<text style="line-height: 44rpx;">2022-12-07 13:53:30</text>
							<text class="fontSize24">商品名称商品名称</text>
						</view>
					</view>
				</view>
				<!-- B赏 -->
				<view class="get-record-item">
					<image src="../../static/images/boom/boom-detail/award-doll.png" mode="" class="user-pic" />
					<view class="right">
						<view class="line-box">
							<text class="fontSize24">速溶沙漠用户 丨 100抽</text>
							<text class="class-type" :class="{'color-orange':true}" data-text="B赏">B赏</text>
						</view>
						<view class="line-box">
							<text style="line-height: 44rpx;">2022-12-07 13:53:30</text>
							<text class="fontSize24">商品名称商品名称</text>
						</view>
					</view>
				</view>
				<!-- C赏 -->
				<view class="get-record-item">
					<image src="../../static/images/boom/boom-detail/award-doll.png" mode="" class="user-pic" />
					<view class="right">
						<view class="line-box">
							<text class="fontSize24">速溶沙漠用户 丨 100抽</text>
							<text class="class-type" :class="{'color-purple':true}" data-text="C赏">C赏</text>
						</view>
						<view class="line-box">
							<text style="line-height: 44rpx;">2022-12-07 13:53:30</text>
							<text class="fontSize24">商品名称商品名称</text>
						</view>
					</view>
				</view>
				<!-- D赏 -->
				<view class="get-record-item">
					<image src="../../static/images/boom/boom-detail/award-doll.png" mode="" class="user-pic" />
					<view class="right">
						<view class="line-box">
							<text class="fontSize24">速溶沙漠用户 丨 100抽</text>
							<text class="class-type" :class="{'color-blue':true}" data-text="D赏">D赏</text>
						</view>
						<view class="line-box">
							<text style="line-height: 44rpx;">2022-12-07 13:53:30</text>
							<text class="fontSize24">商品名称商品名称</text>
						</view>
					</view>
				</view>
				<!-- E赏 -->
				<view class="get-record-item">
					<image src="../../static/images/boom/boom-detail/award-doll.png" mode="" class="user-pic" />
					<view class="right">
						<view class="line-box">
							<text class="fontSize24">速溶沙漠用户 丨 100抽</text>
							<text class="class-type" :class="{'color-green':true}" data-text="D赏">D赏</text>
						</view>
						<view class="line-box">
							<text style="line-height: 44rpx;">2022-12-07 13:53:30</text>
							<text class="fontSize24">商品名称商品名称</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 解决底部脱标 -->
			<view style="height: 150rpx"></view>
		</view>

		<!-- 狂抽按钮 -->
		<view class="fast-lottery">
			<image :src="imageUrl('fast-lottery-btn.png')" mode="" class="fast-lottery-btn" data-text="狂抽" />
		</view>

		<!-- 购买说明弹出层 -->
		<u-popup :show="showRules" mode="center" bgColor="transparent" :safeAreaInsetBottom="false" @close="closeRules">
			<view class="rule-popup" data-text="购买说明">
				<image :src="imageUrl('enjoy-rule-popup.png')" mode="" class="enjoy-rule-popup" />
				<scroll-view scroll-y="true" class="popup-text">
					正文文案内容规则正文文案内容规则
					正文文案内容规则正文文案内容规则正文
					文案内容规则正文文案内容规则正文文案
					内容规则正文文案内容规则正文文案内容
					规则正文文案内容 正文文案内容规则正文文案内容规则
					正文文案内容规则正文文案内容规则正文
					文案内容规则正文文案内容规则正文文案
					内容规则正文文案内容规则正文文案内容
					规则正文文案内容 正文文案内容规则正文文案内容规则
					正文文案内容规则正文文案内容规则正文
					文案内容规则正文文案内容规则正文文案
					内容规则正文文案内容规则正文文案内容
					规则正文文案内容 正文文案内容规则正文文案内容规则
					正文文案内容规则正文文案内容规则正文
					文案内容规则正文文案内容规则正文文案
					内容规则正文文案内容规则正文文案内容
					规则正文文案内容 正文文案内容规则正文文案内容规则
					正文文案内容规则正文文案内容规则正文
					文案内容规则正文文案内容规则正文文案
					内容规则正文文案内容规则正文文案内容
					规则正文文案内容 正文文案内容规则正文文案内容规则
					正文文案内容规则正文文案内容规则正文
					文案内容规则正文文案内容规则正文文案
					内容规则正文文案内容规则正文文案内容
					规则正文文案内容
				</scroll-view>

				<!-- 关闭按钮 -->
				<uni-icons type="close" size="64rpx" color="#fff" class="close-icon" @click="closeRules"></uni-icons>
			</view>
		</u-popup>

		<!-- 赏品余量 -->
		<u-popup :show="showRest" mode="center" bgColor="transparent" :safeAreaInsetBottom="false" @close="closeRest">
			<view class="rule-popup" data-text="赏品余量">
				<image :src="imageUrl('enjoy-rule-popup.png')" mode="" class="enjoy-rule-popup" />
				<!-- 赏品余量列表 -->
				<view class="popup-text">
					<view class="rest-nav">
						<text>赏别</text>
						<text>剩余量</text>
						<text>概率</text>
					</view>
					<scroll-view scroll-y="true" class="rest-content">
						<view class="rest-content-item">
							<text class="class-type color-red" data-text="A赏">A赏</text>
							<text>0/1</text>
							<text>0.0%</text>
						</view>
						<view class="rest-content-item">
							<text class="class-type color-orange" data-text="B赏">B赏</text>
							<text>10/10</text>
							<text>0.5%</text>
						</view>
						<view class="rest-content-item">
							<text class="class-type color-purple" data-text="C赏">C赏</text>
							<text>10/10</text>
							<text>1.0%</text>
						</view>
						<view class="rest-content-item">
							<text class="class-type color-blue" data-text="D赏">D赏</text>
							<text>50/100</text>
							<text>18.0%</text>
						</view>
						<view class="rest-content-item">
							<text class="class-type color-green" data-text="E赏">E赏</text>
							<text>500/500</text>
							<text>80.0%</text>
						</view>
						<view class="rest-content-item">
							<text class="class-type class-import" data-text="first赏">first赏</text>
							<text>1/1</text>
							<text></text>
						</view>
						<view class="rest-content-item">
							<text class="class-type class-import" data-text="last赏">last赏</text>
							<text>1/1</text>
							<text></text>
						</view>
						<view class="rest-content-item">
							<text class="class-type class-import" data-text="全局赏">全局赏</text>
							<text>1/1</text>
							<text></text>
						</view>
					</scroll-view>
				</view>

				<!-- 关闭按钮 -->
				<uni-icons type="close" size="64rpx" color="#fff" class="close-icon" @click="closeRest"></uni-icons>
			</view>
		</u-popup>

		<!-- 悬浮按钮 showGoTop showRefresh -->
		<HoverBtns @refresh="refresh" />

	</view>
</template>

<script>
	import HoverBtns from '@/components/common/HoverBtns.vue'
	export default {
		components: {
			HoverBtns
		},
		data() {
			return {
				navWidth: 0,
				navHeight: 0,
				navTop: 0,
				navBottom: 0,

				// 导航栏黑色背景
				navBlackBg: false,
				navOpacity: 1,

				// 购买说明
				showRules: false,

				// 赏品余量
				showRest: false,

				// 显示奖品预览
				isShowRecord: true,

				// 是否暂停动画
				isPaused: false
			}
		},
		// 页面滚动
		onPageScroll(e) {
			this.scrollEvent(e.scrollTop)
		},
		methods: {
			// 页面滚动
			scrollEvent(val) {
				this.navBlackBg = val > 0 ? true : false
				if (val > 0 && val <= 220) {
					const opacity = val / 220
					this.navOpacity = opacity
				}
				if (val === 0) {
					this.navOpacity = 1
				}
			},
			// 购买说明
			clickRules() {
				// 购买说明弹出层
				this.showRules = true
			},
			// 关闭购买说明弹出层
			closeRules() {
				this.showRules = false
			},
			// 赏品余量弹出层
			clickRest() {
				this.showRest = true
			},
			// 奖品预览
			clickForward() {
				this.isShowRecord = true
			},
			// 中赏记录
			clickRecord() {
				this.isShowRecord = false
			},
			// 关闭赏品余量弹出层
			closeRest() {
				this.showRest = false
			},
			// 暂停音效动画
			pausedAnimation() {
				this.isPaused = !this.isPaused
			},

			goBack() {
				uni.navigateBack({
					delta: 1,
					success() {

					},
					fail() {
						// 失败 返回首页
						uni.switchTab({
							url: '/pages/tabbar/index/index'
						})
					}
				})
			},
			goTo(url) {
				uni.navigateTo({
					url
				})
			},
			// 刷新数据
			refresh() {
				console.log('refresh')
			}
		},
		mounted() {
			// #ifdef MP-WEIXIN
			let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			// nav高度
			this.navHeight = menuButtonInfo.height
			// nav顶部距离
			this.navTop = menuButtonInfo.top
			// 导航栏内容宽度
			this.navWidth = menuButtonInfo.left
			// 底部
			this.navBottom = menuButtonInfo.bottom + 4
			// #endif

			// #ifdef H5
			this.navHeight = 44
			this.navTop = 10
			this.navWidth = 300
			this.navBottom = 48
			// #endif

			// #ifdef APP-PLUS
			this.navHeight = 44
			this.navTop = uni.getSystemInfoSync().windowTop
			this.navWidth = 300
			this.navBottom = 48
			// #endif
		}
	}
</script>

<style lang="scss">
	page {
		background: #1C1C1C;
		color: #fff;
	}

	.enjoy-lottery {
		position: relative;

		// 导航栏
		.enjoy-lottery-nav {
			position: fixed;
			top: 0;
			left: 0;
			width: 100vw;
			// display: flex;
			// justify-content: space-between;
			// align-items: center;
			// padding: 0 24rpx;
			box-sizing: border-box;
			z-index: 99;

			&.black-bg {
				background: #1C1C1C;
			}

			.content {
				position: absolute;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 24rpx;

				.left-back {
					width: 174rpx;
				}

				.title {
					width: 354rpx;
					font-size: 32rpx;
					font-weight: normal;
					line-height: 36rpx;
					text-align: center;

					// 超出显示隐藏
					text-overflow: ellipsis;
					white-space: nowrap;
					overflow: hidden;
				}
			}
		}

		// 顶部盒子
		.enjoy-lottery-top {
			position: absolute;

			.image {
				width: 100vw;
				height: 100vw;
			}

			// 弹幕平移
			@keyframes barrageMove {
				from {
					top: 210rpx;
				}

				to {
					top: -50rpx;
				}
			}

			// 左侧弹幕
			.left-box {
				position: absolute;
				top: 250rpx;
				left: 30rpx;
				width: 300rpx;
				height: 200rpx;

				font-size: 20rpx;
				font-weight: 500;
				line-height: 24rpx;
				color: #fff;
				overflow: hidden;

				.barrage-item {
					position: absolute;
					top: 210rpx;
					left: 0;
					flex-shrink: 0;
					display: flex;
					align-items: center;
					height: 48rpx;
					padding-right: 20rpx;
					border-radius: 24rpx;
					background: rgba(0, 0, 0, 0.5);
					box-sizing: border-box;
					// 累加延迟时间
					animation: barrageMove linear 6s infinite;

					.barrage-item-pic {
						width: 46rpx;
						height: 46rpx;
						border-radius: 50%;
						border: 4rpx solid #fff;
						margin-right: 8rpx;
					}

					// 赏别
					.barrage-item-type {
						color: #FE2861;

						&.color-red {
							color: #FE2861;
						}

						&.color-orange {
							color: #FF7803;
						}

						&.color-purple {
							color: #7D71F5;
						}
					}

					// 奖品图片
					.barrage-item-award {
						width: 40rpx;
						height: 40rpx;
						border-radius: 4rpx;
						margin-left: 12rpx;
					}
				}
			}

			// 音效旋转
			@keyframes soundEffectRotate {
				from {
					transform: rotate(0);
				}

				to {
					transform: rotate(360deg);
				}
			}

			.right-box {
				position: absolute;
				top: 176rpx;
				right: 0;

				// 音效
				.sound-effect-icon {
					width: 64rpx;
					height: 64rpx;
					margin-left: 90rpx;
					animation: soundEffectRotate linear 4s infinite;

					// 暂停动画
					&.pause {
						position: relative;
						opacity: .5;
						animation-play-state: paused;

						&::after {
							position: absolute;
							top: 50%;
							left: 50%;
							display: block;
							content: '';
							width: 64rpx;
							height: 1rpx;
							background: #999;
							transform: translate(-50%, -50%);
						}
					}
				}

				// 右侧说明
				.right-more {
					position: relative;
					overflow: hidden;

					// 背景图
					.image-bg {
						width: 174rpx;
						height: 60rpx;
						transform: translate(10rpx);
					}

					.content {
						position: absolute;
						top: 14rpx;
						left: 34rpx;
						display: flex;
						font-size: 24rpx;
						font-weight: 600;
						line-height: 34rpx;
						color: #fff;
						transform: rotate(-3deg);
					}
				}
			}
		}

		.enjoy-lottery-bottom {
			position: absolute;
			top: 400rpx;
			width: 100vw;

			// 底部折线
			.line-pic {
				// position: absolute;
				// left: 0;
				// bottom: 128rpx;
				// bottom: 248rpx;
				position: relative;
				width: 100vw;
				height: 112rpx;
				vertical-align: bottom;

				&::after {
					content: attr(data-text);
					position: absolute;
					right: 28rpx;
					bottom: 18rpx;
					font-family: YouSheBiaoTiHei;
					font-size: 60rpx;
					font-weight: normal;
					line-height: 60rpx;
					color: #000;
					text-shadow: 4rpx 4rpx 0 0 rgba(255, 255, 255, 0.2);
				}

				&::before {
					content: attr(data-text);
					position: absolute;
					right: 28rpx;
					bottom: 18rpx;
					font-family: YouSheBiaoTiHei;
					font-size: 60rpx;
					font-weight: normal;
					line-height: 60rpx;
					-webkit-text-stroke: 4rpx #48FFFD;
				}
			}

			// 吸顶
			.sticky-top {
				position: sticky;
				top: 0;
				background: #1C1C1C;
				z-index: 99;

				// 按钮组
				.btns-view {
					display: flex;
					justify-content: space-between;
					align-items: flex-end;
					width: 100vw;
					padding: 20rpx 28rpx 0;
					box-sizing: border-box;
					background: #1C1C1C;

					.image {
						position: relative;

						// 黑色阴影
						&::before {
							position: absolute;
							top: 8rpx;
							left: 10rpx;
							content: attr(data-text);
							font-size: 24rpx;
							font-weight: 600;
							line-height: 34rpx;
							-webkit-text-stroke: 4rpx #000;
						}

						// 白色文字
						&::after {
							position: absolute;
							top: 8rpx;
							left: 10rpx;
							content: attr(data-text);
							font-size: 24rpx;
							font-weight: 600;
							line-height: 34rpx;
							color: #fff;
						}

						// 赏品余量
						&:nth-child(1) {
							width: 116rpx;
							height: 44rpx;
						}

						// 奖品预览
						&:nth-child(2) {
							width: 200rpx;
							height: 56rpx;
							transform: translate(26rpx);

							&::before {
								top: 12rpx;
								left: 30rpx;
							}

							&::after {
								top: 12rpx;
								left: 30rpx;
							}
						}

						// 中赏记录
						&:nth-child(3) {
							width: 200rpx;
							height: 56rpx;
							transform: translate(-26rpx);

							&::before {
								top: 12rpx;
								left: 60rpx;
							}

							&::after {
								top: 12rpx;
								left: 60rpx;
							}
						}

						// 换箱
						&:nth-child(4) {
							width: 116rpx;
							height: 56rpx;

							&::before {
								top: 16rpx;
								left: 26rpx;
							}

							&::after {
								top: 16rpx;
								left: 26rpx;
							}
						}
					}
				}

				// 箱子信息
				.box-info {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 30rpx;
					background: #1C1C1C;
					font-size: 24rpx;
					font-weight: 600;
					line-height: 24rpx;

					.last-one {
						display: flex;
						align-items: center;
					}

					.now-one {
						font-weight: 500;
						line-height: 34rpx;

						.colorOrange {
							color: #FF7803;
							font-size: 32rpx;
						}
					}
				}
			}

			// first last all
			.three-kind-record {
				display: flex;
				justify-content: space-between;
				width: 100vw;
				padding: 12rpx 28rpx 0;
				background: #1C1C1C;
				box-sizing: border-box;

				// 单个商品
				.one-record {
					position: relative;
					width: 218rpx;
					height: 280rpx;
					border-radius: 8rpx;
					overflow: hidden;

					.one-record-top {
						position: absolute;
						top: 0;
						left: 0;
						display: flex;
						justify-content: space-between;
						width: 218rpx;
						height: 32rpx;
						background: rgba(0, 0, 0, 0.5);
						font-size: 24rpx;
						border-radius: 8rpx;
						z-index: 9;

						// 商品类型背景
						.enjoy-record-box {
							position: relative;
							width: 124rpx;
							height: 40rpx;

							&::before {
								position: absolute;
								top: 0;
								left: 10rpx;
								content: attr(data-text);
								font-size: 24rpx;
								color: #fff;
							}
						}
					}

					// 商品图片
					.one-record-pic {
						width: 218rpx;
						height: 218rpx;
						vertical-align: bottom;
						// border: 1px solid;
						// border-image: linear-gradient(180deg, rgba(72, 255, 253, 0.00) 58%, #48FFFD 100%) 1;

						box-sizing: border-box;
						border: 2rpx solid transparent;
						border-radius: 8rpx;
						background-clip: padding-box, border-box;
						background-origin: padding-box, border-box;
						background-image: linear-gradient(to right, #000, #000), linear-gradient(180deg, rgba(72, 255, 253, 0.00) 58%, #48FFFD 100%);
					}

					.one-record-tip {
						font-size: 18rpx;
						font-weight: normal;
						line-height: 32rpx;
						color: rgba(255, 255, 255, 0.5);

						.one-record-name {
							padding-top: 4rpx;
							font-size: 24rpx;
							color: #fff;

							text-overflow: ellipsis;
							white-space: nowrap;
							overflow: hidden;
						}
					}
				}
			}

			// 赏品列表
			.record-list {
				display: flex;
				flex-wrap: wrap;
				padding: 20rpx 28rpx;

				.record-item {
					position: relative;
					width: 160rpx;
					margin-right: 18rpx;
					margin-bottom: 30rpx;

					&:nth-child(4n) {
						margin-right: 0;
					}

					.one-record-top {
						position: absolute;
						top: 0;
						left: 0;
						display: flex;
						justify-content: space-between;
						width: 160rpx;
						height: 32rpx;
						padding: 4rpx;
						background: rgba(0, 0, 0, 0.5);
						font-size: 24rpx;
						line-height: 24rpx;
						border-radius: 8rpx;
						z-index: 9;
					}

					// 商品图片
					.one-record-pic {
						width: 160rpx;
						height: 160rpx;
						vertical-align: bottom;
						// border: 1px solid;
						// border-image: linear-gradient(180deg, rgba(72, 255, 253, 0.00) 58%, #48FFFD 100%) 1;

						box-sizing: border-box;
						border: 2rpx solid transparent;
						border-radius: 8rpx;
						background-clip: padding-box, border-box;
						background-origin: padding-box, border-box;
						background-image: linear-gradient(to right, #000, #000), linear-gradient(180deg, rgba(72, 255, 253, 0.00) 58%, #48FFFD 100%);
					}

					.one-record-tip {
						font-size: 18rpx;
						font-weight: normal;
						line-height: 32rpx;
						color: rgba(255, 255, 255, 0.5);

						.one-record-name {
							padding-top: 4rpx;
							font-size: 24rpx;
							color: #fff;

							text-overflow: ellipsis;
							white-space: nowrap;
							overflow: hidden;
						}
					}
				}
			}

			// 中赏记录
			.get-record-list {
				background: #1C1C1C;
				padding: 10rpx 30rpx 0;

				.get-record-item {
					display: flex;
					width: 690rpx;
					height: 84rpx;
					padding: 10rpx 16rpx;
					margin-bottom: 10rpx;
					background: rgba(15, 27, 75, 0.3);
					border-radius: 8rpx;
					box-sizing: border-box;

					// first last 全局
					&.import-bg {
						background: rgba(87, 44, 1, 0.3);
					}

					// 用户头像
					.user-pic {
						width: 64rpx;
						height: 64rpx;
						border-radius: 50%;
						margin-right: 14rpx;
					}

					.right {
						width: 580rpx;
						font-size: 18rpx;
						color: #fff;

						.line-box {
							display: flex;
							justify-content: space-between;

							.fontSize24 {
								font-size: 24rpx;
							}

							// 赏别
							.class-type {
								position: relative;
								display: inline-block;
								width: 200rpx;
								text-align: right;
								font-family: YouSheBiaoTiHei;

								// 文字
								&::after {
									position: absolute;
									top: 0;
									right: 0;
									content: attr(data-text);
									font-size: 24rpx;
									line-height: 24rpx;
									color: #FE245E;
								}

								// 白色描边
								&::before {
									position: absolute;
									top: 0;
									right: 0;
									content: attr(data-text);
									font-size: 24rpx;
									line-height: 24rpx;
									-webkit-text-stroke: 4rpx #fff;
								}

								// A赏
								&.color-red::after {
									color: #FE245E;
								}

								// B赏
								&.color-orange::after {
									color: #E9871C;
								}

								// C赏
								&.color-purple::after {
									color: #9932FD;
								}

								// D赏
								&.color-blue::after {
									color: #198EF9;
								}

								// 其他赏
								&.color-green::after {
									color: #00B007;
								}

								// first last 全局
								&.class-import::after {
									background: linear-gradient(105deg, #F074AB 0%, #7D71F5 99%);
									-webkit-background-clip: text;
									-webkit-text-fill-color: transparent;
									background-clip: text;
									text-fill-color: transparent;
								}
							}
						}
					}
				}
			}
		}

		// 底部狂抽按钮
		.fast-lottery {
			position: fixed;
			left: 0;
			bottom: 0;
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100vw;
			height: 150rpx;
			background: linear-gradient(180deg, rgba(28, 28, 28, 0.2) 0%, #1C1C1C 27%);
			box-sizing: border-box;
			z-index: 99;

			// 预设一个高度
			padding-bottom: calc(20rpx + constant(safe-area-inset-bottom));
			padding-bottom: calc(20rpx + env(safe-area-inset-bottom));

			.fast-lottery-btn {
				position: relative;
				width: 320rpx;
				height: 128rpx;

				&::after {
					position: absolute;
					top: 50%;
					left: 50%;
					content: attr(data-text);
					font-family: YouSheBiaoTiHei;
					font-size: 56rpx;
					font-weight: normal;
					line-height: 34rpx;
					color: #fff;
					transform: translate(-50%, -50%);
				}

				&::before {
					position: absolute;
					top: 50%;
					left: 50%;
					content: attr(data-text);
					font-family: YouSheBiaoTiHei;
					font-size: 56rpx;
					font-weight: normal;
					line-height: 34rpx;
					-webkit-text-stroke: 8rpx #000;
					transform: translate(-50%, -50%);
				}
			}
		}
	}

	// 购买说明弹出层
	.rule-popup {
		position: relative;
		width: 580rpx;
		height: 860rpx;

		// 规则文本
		.popup-text {
			position: absolute;
			width: 520rpx;
			height: 650rpx;
			padding: 18rpx 14rpx;
			margin: 66rpx 20rpx 60rpx 34rpx;
			font-size: 28rpx;
			line-height: 40rpx;
			color: #fff;
			box-sizing: border-box;

			// 余量
			.rest-nav {
				display: flex;
				justify-content: space-between;
				padding-bottom: 20rpx;
				border-bottom: 2rpx solid rgba(255, 255, 255, .1);
			}

			// 剩余数量
			.rest-content {
				height: 600rpx;

				.rest-content-item {
					display: flex;
					justify-content: space-between;
					padding: 24rpx 0;

					>text {
						display: inline-block;
						width: 200rpx;

						&:nth-child(2) {
							text-align: center;
						}

						&:nth-child(3) {
							text-align: right;
						}
					}

					// 赏别
					.class-type {
						position: relative;
						display: inline-block;
						font-family: YouSheBiaoTiHei;
						font-size: 32rpx;
						line-height: 34rpx;

						// 文字
						&::after {
							position: absolute;
							top: 0;
							left: 0;
							content: attr(data-text);
							color: #FE245E;
						}

						// 白色描边
						&::before {
							position: absolute;
							top: 0;
							left: 0;
							content: attr(data-text);
							// font-size: 24rpx;
							// line-height: 24rpx;
							-webkit-text-stroke: 4rpx #fff;
						}

						// A赏
						&.color-red::after {
							color: #FE245E;
						}

						// B赏
						&.color-orange::after {
							color: #E9871C;
						}

						// C赏
						&.color-purple::after {
							color: #9932FD;
						}

						// D赏
						&.color-blue::after {
							color: #198EF9;
						}

						// 其他赏
						&.color-green::after {
							color: #00B007;
						}

						// first last 全局
						&.class-import::after {
							background: linear-gradient(105deg, #F074AB 0%, #7D71F5 99%);
							-webkit-background-clip: text;
							-webkit-text-fill-color: transparent;
							background-clip: text;
							text-fill-color: transparent;
						}
					}
				}
			}
		}

		// 关闭弹出层
		.close-icon {
			position: absolute;
			left: 50%;
			bottom: 0;
			transform: translateX(-50%);
		}

		// 弹出层背景图
		.enjoy-rule-popup {
			position: absolute;
			top: 0;
			display: block;
			width: 580rpx;
			height: 780rpx;
		}

		// 右上角文字提示
		&::after {
			position: absolute;
			right: 20rpx;
			content: attr(data-text);
			font-family: YouSheBiaoTiHei;
			font-size: 36rpx;
			line-height: 48rpx;
			color: #FF7803;
		}
	}
</style>